<template>
    <div class="dashboard-container" id="dashboard">
        <div class="dashboard-text">欢迎光临:{{name}} </div>

        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="form"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.orderCount') }}</div>
                        <div class="card-panel-num">
                            {{dashboard.orderCount}}
                        </div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="peoples"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.userCount') }}</div>
                        <div class="card-panel-num">{{dashboard.userCount}}</div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="cart"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.userLike') }}</div>
                        <div class="card-panel-num">{{dashboard.cartCount}}</div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="money"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.income') }}</div>
                        <div class="card-panel-num">{{dashboard.payed}}</div>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="job"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.unPay') }}</div>
                        <div class="card-panel-num">
                            {{dashboard.unPay}}
                        </div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="money"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.unPayPrice') }}</div>
                        <div class="card-panel-num">{{dashboard.unPayPrice}}</div>
                    </el-col>
                </el-card>
            </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <el-col :span="12">
                <svg-icon icon-class="log"></svg-icon>
              </el-col>
              <el-col :span="12">
                <div class="card-panel-text">{{ $t('dashboard.unSend') }}</div>
                <div class="card-panel-num">{{dashboard.unSend}}</div>
              </el-col>
            </el-card>
          </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <el-col :span="12">
                        <svg-icon icon-class="money"></svg-icon>
                    </el-col>
                    <el-col :span="12">
                        <div class="card-panel-text">{{ $t('dashboard.unSendPrice') }}</div>
                        <div class="card-panel-num">{{dashboard.unSendPrice}}</div>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <el-col :span="12">
              <svg-icon icon-class="skill"></svg-icon>
            </el-col>
            <el-col :span="12">
              <div class="card-panel-text">{{ $t('dashboard.sended') }}</div>
              <div class="card-panel-num">
                {{dashboard.sended}}
              </div>
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-col :span="12">
              <svg-icon icon-class="money"></svg-icon>
            </el-col>
            <el-col :span="12">
              <div class="card-panel-text">{{ $t('dashboard.sendedPrice') }}</div>
              <div class="card-panel-num">{{dashboard.sendedPrice}}</div>
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-col :span="12">
              <svg-icon icon-class="template"></svg-icon>
            </el-col>
            <el-col :span="12">
              <div class="card-panel-text">{{ $t('dashboard.cancel') }}</div>
              <div class="card-panel-num">{{dashboard.cancel}}</div>
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-col :span="12">
              <svg-icon icon-class="money"></svg-icon>
            </el-col>
            <el-col :span="12">
              <div class="card-panel-text">{{ $t('dashboard.cancelPrice') }}</div>
              <div class="card-panel-num">{{dashboard.cancelPrice}}</div>
            </el-col>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <el-col :span="12">
              <svg-icon icon-class="lock"></svg-icon>
            </el-col>
            <el-col :span="12">
              <div class="card-panel-text">{{ $t('dashboard.refunding') }}</div>
              <div class="card-panel-num">
                {{dashboard.refunding}}
              </div>
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-col :span="12">
              <svg-icon icon-class="money"></svg-icon>
            </el-col>
            <el-col :span="12">
              <div class="card-panel-text">{{ $t('dashboard.refundingPrice') }}</div>
              <div class="card-panel-num">{{dashboard.refundingPrice}}</div>
            </el-col>
          </el-card>
        </el-col>

      </el-row>

    </div>
</template>


<script src="./dashboard.js"></script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}

.dashboard {
    &-container {
        padding: 15px;
        background-color: #f0f2f5;
    }
    &-text {
        font-size: 14px;
        line-height: 22px;
        padding-bottom: 15px;
    }
}
.echarts {
    width: 100%;
    height: 100%;
}
.box-card {
    height: 108px;
}
.chart {
    height: 350px;
}
.section {
    padding: 20px;
    background-color: white;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.box-card > div > div > .svg-icon {
    width: 4em;
    height: 4em;
    color: #34bfa3;
}
.card-panel-text {
    padding-top: 10px;
    font-size: 16px;
    color: gray;
}
.card-panel-num {
    padding-top: 10px;
    font-size: 20px;
    font-weight: bold;
}
</style>
